<template>
  <div class="root-page">

    <!-- 右侧导航 -->
    <div class="blog-info-left">
      <blog-user-info :detail="asyncUserInfo" :userInfo="userCache"/>
      <blog-tag-info  :userId="userId" :tagId="tagId" :userInfo="userCache" :asyncList="asyncTagInfo"/>
    </div>
    
    <!-- 博客详情 -->
    <div class="blog-content-page">
      <blog-detail 
        v-if="isShowBlogDetail" 
        :blogId="blogId"
        :blogDetail="asyncBlogDetail" 
        :mdRender="asyncMdRender"/>

      <!-- 文章列表 -->
      <blog-list 
        v-if="!isShowBlogDetail"
        :tagId="tagId"
        :userId="userId"
        :userInfo="userCache"
        :isShowTagDetail="isShowTagDetail"
        :isShowUserDetail="isShowUserDetail"
        :tagDetail="asyncTagDetail"
        :asyncList="asyncBlogList"/>
    </div>

    <!-- 返回顶部 -->
    <to-top/>
  </div>
</template>

<script>
import Api from "@/utils/api.js";
import ToTop from '@/components/ToTop.vue'
import Empty from '@/components/Empty.vue'
import BlogUserInfo from './components/BlogUserInfo.vue';
import BlogTagInfo from './components/BlogTagInfo.vue';
import BlogList from './components/blogList.vue'
import BlogDetail from './components/blogDetail.vue';
import md from "@/plugins/markdown";

export default {

  head () {
    return {
      title: this.mateData.title,
      meta:[
        {hid:'description',name:'description',content: this.mateData.description},
        {hid:'keywords',name:'keywords',content: this.mateData.keywords}
      ],
      script: [{ src: '/js/ribbon.js', body: true},]
    }
  },

  components:{
    ToTop,
    Empty,
    BlogUserInfo,
    BlogTagInfo,
    BlogDetail,
    BlogList,
  },

  data(){
    return{
      tagDrawer: false,
    }
  },

  async asyncData({$axios, app, route, params, isDev}) {
    var mateData = {title:'',keywords:'', description:''}

    let routeBlogId = route.query.id
    let routeTagId = route.query.tagId
    let routeUserId = route.query.userId

    // 显示控制
    let isShowUserDetail = false;
    let isShowTagDetail = false;
    let isShowBlogDetail = false;

    // 参数拦截
    if(!routeBlogId && !routeTagId && !routeUserId){
      app.context.error({statusCode: 201, message: '页面不存在！' })
    }

    try { 
      let asyncUserInfo;
      let asyncTagInfo;
      let asyncTagDetail;
      let asyncBlogList;
      let asyncBlogDetail;
      let asyncMdRender;

      // 用户缓存
      var userCache = await $axios.post(Api.USER_CACHE)

      // 标签详情
      if(routeTagId){
        isShowTagDetail = true;
        // 博客标签详情
        asyncTagDetail = await $axios.post(Api.BLOG_TAG_DETAIL, { id: routeTagId})
        // 博客列表
        asyncBlogList = await $axios.post(Api.BLOG_LIST_BY_TAG_ID, { id: asyncTagDetail.tagId})
        routeUserId = asyncTagDetail.userId
      }

      // 博主详情
      if(routeUserId){
        // 博主信息
        asyncUserInfo = await $axios.post(Api.BLOG_INFO_DETAIL, { userId: routeUserId})
        // 标签列表
        asyncTagInfo = await $axios.post(Api.BLOG_TAG_INFO_LIST, { userId: routeUserId})
        // 博客列表
        if(!asyncBlogList){
          asyncBlogList = await $axios.post(Api.BLOG_LIST_BY_USER_ID, {status: 0, userId: routeUserId })
        }

        // SEO搜索优化
        if(!isShowTagDetail){
          isShowUserDetail = true;
          mateData.title = `${asyncUserInfo.userName}的博客-HuiYong`
          mateData.keywords = asyncUserInfo.userName
          mateData.description = `${asyncUserInfo.userName}的博客,` + asyncBlogList.map(item => item.title).join() 
        }else{
          mateData.title = `${asyncTagDetail.tagName}-${asyncUserInfo.userName}的博客-HuiYong`
          mateData.keywords = asyncTagDetail.tagName
          mateData.description = asyncTagInfo.map(item => item.tagName).join() 
        }
      }

      // 博客详情
      if(routeBlogId){
        isShowBlogDetail = true;
        asyncBlogDetail = await $axios.post(Api.BLOG_DETAIL, { blogId: routeBlogId})

        routeTagId = asyncBlogDetail.tagId
        routeUserId = asyncBlogDetail.userId

        // 博主信息
        asyncUserInfo = await $axios.post(Api.BLOG_INFO_DETAIL, { userId: routeUserId})
        // 标签列表
        asyncTagInfo = await $axios.post(Api.BLOG_TAG_INFO_LIST, { userId: routeUserId})

        if(asyncBlogDetail.content){
          asyncMdRender = md.render(asyncBlogDetail.content)
          
          mateData.title = `${asyncBlogDetail.title}-${asyncUserInfo.userName}的博客-HuiYong`
          mateData.keywords = `${asyncBlogDetail.title}-${asyncBlogDetail.tagName}`
          mateData.description = asyncBlogDetail.content.replace(/<\/?[^>]*>/g, "").replace(/[|]*\n/, "").replace(/&npsp;/gi, "");

          // api 提交百度收录
          if(!isDev){
              var url = `https://huiyong.online/blogDetail?id=${routeBlogId}`
              var baiduSeoUrl  = "http://data.zz.baidu.com/urls?site=https://huiyong.online&token=86Nyyk3vlpLwPfxV"
              $axios.post(baiduSeoUrl, url)
          }
        }
      }

      return {
        mateData: mateData,
        userCache: userCache,

        isShowUserDetail: isShowUserDetail,
        isShowTagDetail: isShowTagDetail,
        isShowBlogDetail: isShowBlogDetail,

        userId: routeUserId,
        tagId: routeTagId,
        blogId: routeBlogId,
        asyncUserInfo: asyncUserInfo,
        asyncTagInfo: asyncTagInfo,
        asyncTagDetail: asyncTagDetail,
        asyncBlogList: asyncBlogList,
        asyncBlogDetail: asyncBlogDetail,
        asyncMdRender: asyncMdRender
      }
    }catch(e){
      console.log(e)
      app.context.error({statusCode: e.code, message: e.message })
    }
  },

  methods:{
    changeId(userId, tagId){
      this.userId = userId
      this.tagId = tagId
    }
  },
}
</script>

<style lang="less">
@import './index.less';
</style>